@extends('admin.common.main')


@section('content')

    <article class="page-container">

        @include('admin.common.error'){{--如果出现错误--}}

        <form action="{{route('admin.node.store')}}" method="post" class="form form-horizontal" id="form-member-add"

              @submit.prevent="onSubmit">
{{--  .prevent 修饰符 提交提交表单后停止加载页面  --}}
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>节点名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" v-model="info.name" placeholder="" id="name" name="name">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>路由别名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" v-model="info.route_name" id="name" name="name">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>pid：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="" id="" class="select" @change="changePid">

                        <option value="0">==顶级==</option>
                        @foreach($data as $val)
                            <option value="{{$val['id']}}">{{$val['html']}}{{$val['name']}}</option>
                        @endforeach

                    </select>
                </div>
            </div>
            <div class="">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否为菜单：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="radio" class="radio-inline" value="1"  v-model="info.is_menu" name="is_menu" checked> 是
                    <input type="radio" class="radio-inline" value="0"  v-model="info.is_menu" name="is_menu"> 否
                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                </div>
            </div>
        </form>
    </article>

@endsection



@section('js')

    <script type="text/javascript" src="/admin/js/vue@3.js"></script>
    <script type="text/javascript">
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    info:{
                        _token:"{{csrf_token()}}",
                        name:"",
                        route_name:"",
                        pid:0,
                        is_menu:1
                    }
                }
            },
            methods:{
                /*
                 *借助validate 或自己写正则
                 *es7 async await  异步变同步  避免 回调地狱
                 */
               async onSubmit(evt){
                  let url = evt.target.action;
                  // 通过 {}  直接在 await 分别获取 返回结果中的内容
                  let {error_code,msg} = await $.post(url,this.info)

                   console.log(error_code,msg);
                    if(error_code==0){

                        location.href="{{route('admin.node.index')}}"
                    }else{
                        layer.msg(msg)
                    }

                },
                changePid(evt){

                   let pid = evt.target.value;

                   this.info.pid=pid;
                }


            }
        }).mount('.page-container')
    </script>


@endsection
